@c1s: 5rem;
@c1c: #5c77ee;

@c2s: 4rem;
@c2c: #5ceed6;

@c3s: 6rem;
@c3c: #aaf189;

#bg-circle {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 0;

    div {
        position: absolute;
        z-index: -1;
        border-radius: 50%;
        transition: none;

        &:first-child {
            width: @c1s;
            height: @c1s;

            background: @c1c;
            box-shadow: 0 0 .5rem .5rem @c1c;

            animation: c1 15s infinite;
        }

        &:nth-child(2) {
            width: @c2s;
            height: @c2s;

            background: @c2c;
            box-shadow: 0 0 .5rem .5rem @c2c;

            animation: c2 20s infinite;
        }

        &:nth-child(3) {
            bottom: 1rem;
            right: 5rem;

            width: @c3s;
            height: @c3s;

            background: @c3c;
            box-shadow: 0 0 .5rem .5rem @c3c;

            animation: c3 30s infinite;
        }
    }
}


@keyframes c1 {
    0% {
        top: -2rem;
        right: -1rem;
    }

    20% {
        top: -2.5rem;
        right: -1.5rem;
    }

    40% {
        top: -1.8rem;
        right: -2rem;
    }

    60% {
        top: -2.2rem;
        right: -1rem;
    }

    80% {
        top: -1.6rem;
        right: -2.2rem;
    }

    100% {
        top: -2rem;
        right: -1rem;
    }

}

@keyframes c2 {
    0% {
        top: 4.2rem;
        left: -1.2rem;

        // box-shadow: 0 0 .5rem .5rem @c2c;
        transform: rotate(0deg);
    }

    20% {
        top: 5.4rem;
        left: -2.4rem;
        // box-shadow: .5rem .5rem .2rem .5rem @c2c - 10;
        transform: rotate(72deg);
    }

    40% {
        top: 4rem;
        left: -.4;
        transform: rotate(144deg);
    }

    60% {
        top: 4.8rem;
        left: -.8rem;
        transform: rotate(218deg);
    }

    80% {
        top: 3.6rem;
        left: -2rem;
        // box-shadow: @c2s/2 @c2s/2 .5rem .5rem @c2c;
        transform: rotate(296deg);
    }

    100% {
        top: 4.2rem;
        left: -1.2rem;

        // box-shadow: 0 0 .5rem .5rem @c2c;
        transform: rotate(360deg);
    }

}

@keyframes c3 {
    0% {
        bottom: 1rem;
        right: 5rem;
    }

    20% {
        bottom: 2.2rem;
        right: 6.4rem;
    }

    40% {
        bottom: 1.6rem;
        right: 8rem;
    }

    60% {
        bottom: .2rem;
        right: 6.6rem;
    }

    80% {
        bottom: -1.6rem;
        right: 3.2rem;
    }

    100% {
        bottom: 1rem;
        right: 5rem;
    }

}